<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <script type="text/javascript" th:src="@{/css/login.css}"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!-- jquery-validator -->
    <script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
    <script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
    <!-- layer -->
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <!-- md5.js -->
    <script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <style>
        @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400|Lora");

        body {
            background: #cbc0d3;
        }


        /* 容器的样式 */

        .container {
            margin: auto;
            width: 650px;
            height: 550px;
            position: relative;
        }

        .welcome {
            background: #f6f6f6;
            width: 650px;
            height: 415px;
            position: absolute;
            top: 25%;
            border-radius: 5px;
            box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
        }

        .pinkbox {
            position: absolute;
            top: -10%;
            left: 5%;
            background: #eac7cc;
            width: 320px;
            height: 500px;
            border-radius: 5px;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            transition: all 0.5s ease-in-out;
            z-index: 2;
        }

        .nodisplay {
            display: none;
            transition: all 0.5s ease;
        }

        .leftbox,
        .rightbox {
            position: absolute;
            width: 50%;
            transition: 1s all ease;
        }

        .leftbox {
            left: -2%;
        }

        .rightbox {
            right: -2%;
        }


        /* 字体和按钮的样式 */

        h1 {
            font-family: "Open Sans", sans-serif;
            text-align: center;
            margin-top: 95px;
            text-transform: uppercase;
            color: #f6f6f6;
            font-size: 2em;
            letter-spacing: 8px;
        }

        .title {
            font-family: "Lora", serif;
            color: #8e9aaf;
            font-size: 1.8em;
            line-height: 1.1em;
            letter-spacing: 3px;
            text-align: center;
            font-weight: 300;
            margin-top: 20%;
        }

        .desc {
            margin-top: -8px;
        }

        .account {
            margin-top: 45%;
            font-size: 10px;
        }

        p {
            font-family: "Open Sans", sans-serif;
            font-size: 0.7em;
            letter-spacing: 2px;
            color: #8e9aaf;
            text-align: center;
        }

        span {
            color: #eac7cc;
        }

        .flower {
            position: absolute;
            width: 150px;
            height: 150px;
            top: 45%;
            left: 27%;
            opacity: 0.8;
        }

        .smaller {
            width: 130px;
            height: 130px;
            top: 48%;
            left: 30%;
            opacity: 0.9;
        }

        button {
            padding: 12px;
            font-family: "Open Sans", sans-serif;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 11px;
            border-radius: 10px;
            margin: auto;
            outline: none;
            display: block;
        }

        button:hover {
            background: #eac7cc;
            color: #f6f6f6;
            transition: background-color 1s ease-out;
        }

        .button {
            margin-top: 3%;
            background: #f6f6f6;
            color: #ce7d88;
            border: solid 1px #eac7cc;
        }


        /* 表单样式 */

        form {
            display: flex;
            align-items: center;
            flex-direction: column;
            padding-top: 7px;
        }

        .more-padding {
            padding-top: 35px;
        }

        .more-padding input {
            padding: 12px;
        }

        .more-padding .sumbit {
            margin-top: 45px;
        }

        .sumbit {
            margin-top: 25px;
            padding: 12px;
            border-color: #ce7d88;
        }

        .sumbit:hover {
            background: #cbc0d3;
            border-color: #bfb1c9;
        }

        input {
            background: #eac7cc;
            width: 65%;
            color: #ce7d88;
            border: none;
            border-bottom: 1px solid rgba(246, 246, 246, 0.5);
            padding: 9px;
            font-weight: 100;
        }

        input::placeholder {
            color: #f6f6f6;
            letter-spacing: 2px;
            font-size: 1.0em;
            font-weight: 100;
        }

        input:focus {
            color: #ce7d88;
            outline: none;
            border-bottom: 1.2px solid rgba(206, 125, 136, 0.7);
            font-size: 1.0em;
            transition: 0.8s all ease;
        }

        input:focus::placeholder {
            opacity: 0;
        }

        label {
            font-family: "Open Sans", sans-serif;
            color: #ce7d88;
            font-size: 0.8em;
            letter-spacing: 1px;
        }

        .checkbox {
            display: inline;
            white-space: nowrap;
            position: relative;
            left: -52px;
            top: 25px;
        }

        input[type=checkbox] {
            width: 15px;
            background: #ce7d88;
        }

        .checkbox input[type=checkbox]:checked + label {
            color: #ce7d88;
            transition: 0.5s all ease;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="welcome">
        <div class="pinkbox">
            <!-- 注册 -->
            <div class="signup nodisplay">
                <h1>Register</h1>
                <form autocomplete="off" id="registerForm">
                    <input type="text" placeholder="昵称" id="username">
                    <input type="mobile" placeholder="电话号码" id="telephone">
                    <input type="password" placeholder="密码" id="register-password">
                    <input type="password" placeholder="确认密码" id="confirm-password">
                    <button class="button submit" onclick="register()">Create Account</button>
                </form>
            </div>

            <!-- 登录 -->
            <div class="signin">
                <h1>Sign In</h1>
                <form class="more-padding" id="loginForm" method="post" autocomplete="off">
                    <input id="mobile" name="mobile" type="text" placeholder="手机号码" required="true" minlength="11"
                           maxlength="11"/>
                    <input id="password" name="password" type="password" placeholder="密码" required="true" minlength="6"
                           maxlength="16"/>
                    <div class="checkbox">
                        <input type="checkbox" id="remember"/><label for="remember">Remember Me</label>
                    </div>
                    <button class="button sumbit" onclick="login()">Login</button>
                </form>
            </div>
        </div>

        <div class=" leftbox">
            <h2 class="title"><span>GOODS</span>&<br>PURCHASE</h2>
            <p class="desc ">Pick your perfect <span>bouquet</span></p>
            <img class="flower smaller "
                 src="https://hbimg.huabanimg.com/c09305167a883e60179a45374df73252304001359acca-W3qbYm_fw658/format/webp "/>
            <p class="account ">Have an account?</p>
            <button class="button" id="signin">Login</button>
        </div>

        <div class="rightbox ">
            <h2 class="title "><span>GOODS</span>&<br>PURCHASE</h2>
            <p class="desc ">Pick your perfect <span>goods</span></p>
            <img class="flower "
                 src="https://hbimg.huabanimg.com/b28be92c8198975a74ad656eba00b352c9b9e589819af-lDXUAS_fw658/format/webp "/>
            <p class="account ">Don't have an account?</p>
            <button class="button" id="signup">Sign Up</button>
        </div>
    </div>
</div>

</body>

<script>
    $('#signup').click(function () {
        $('.pinkbox').css('transform', 'translateX(80%)');
        $('.signin').addClass('nodisplay');
        $('.signup').removeClass('nodisplay');
    });

    $('#signin').click(function () {
        $('.pinkbox').css('transform', 'translateX(0%)');
        $('.signup').addClass('nodisplay');
        $('.signin').removeClass('nodisplay');
    });

    function login() {
        $("#loginForm").validate({
            submitHandler: function (form) {
                doLogin();
            }
        });
    }

    function doLogin() {
        g_showLoading();
        var inputPass = $("#password").val();
        var salt = g_passsword_salt;
        var str = "" + salt.charAt(0) + salt.charAt(2) + inputPass + salt.charAt(5) + salt.charAt(4);
        var password = md5(str);

        $.ajax({
            url: "/login/doLogin",
            type: "POST",
            data: {
                mobile: $("#mobile").val(),
                password: password
            },
            success: function (data) {
                layer.closeAll();
                if (data.code == 200) {
                    layer.msg("成功");
                    window.location.href = "/goods/toList";
                } else {
                    layer.msg(data.message);
                }
            },
            error: function () {
                layer.closeAll();
            }
        });
    }

    function register() {
        $("#registerForm").validate({
            submitHandler: function (form) {
                doRegister();
            }
        });
    }

    function doRegister() {
        g_showLoading();
        var username = $("#username").val();
        var telephone = $("#telephone").val();
        var inputPass = $("#register-password").val();
        var confirm = $("#confirm-password").val();

        if (inputPass != confirm) {
            layer.msg("两次密码不一致,请重新检查");
        } else {
            var salt = g_passsword_salt;
            var str = "" + salt.charAt(1) + salt.charAt(6) + inputPass + salt.charAt(2) + salt.charAt(3);
            var password = md5(str);

            $.ajax({
                url: "/login/doRegister",
                type: "POST",
                data: {
                    username: username,
                    mobile: telephone,
                    password: password
                },
                success: function (data) {
                    layer.closeAll();
                    if (data.code == 200) {
                        layer.msg("成功");
                        window.location.href = "/login/toLogin";
                    } else {
                        layer.msg(data.message);
                    }
                },
                error: function () {
                    layer.closeAll();
                }
            });
        }
    }
</script>
</html>